{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>点餐系统</title>
  <link rel="stylesheet" href="{% static 'web/css/bootstrap.min.css'%}">
  <link rel="stylesheet" href="{% static 'web/css/common.css'%}">
  <style type="text/css">
    body {
      min-height: 2000px;
      padding-top: 70px;
    }

    .navbar-default {
      background-color: #ff8800;
      border-color: #e7e7e7;
    }

    .navbar-default .navbar-brand {
      color: #fff;
    }

    .navbar-default .navbar-nav>li>a,
    .navbar-default .navbar-nav>li>a:visited {
      color: #fff;
      width: 100px;
      font-size: 14px;
      text-align: center;
    }

    .navbar-default .navbar-nav>.active>a,
    .navbar-default .navbar-nav>.active>a:visited,
    .navbar-default .navbar-nav li a:hover,
    .navbar-default .navbar-nav>.active>a:hover,
    .navbar-default .navbar-nav li a:active {
      color: #fff;
      background-color: #FF4500;
      width: 100px;
      font-size: 14px;
      text-align: center;
    }

    table tr td {
      font-size: 11px;
    }

    table tr td.price {
      color: red;
    }

    table tr td.num span {
      color: red;
      padding: 0px 5px
    }

    table tr td.num i {
      border-width: 0px;
      background-color: #ddd;
    }

    div.shoplist div.bn {
      font-size: 12px;
      line-height: 25px;
    }

    div.shoplist div.bn span.price {
      color: red;
    }
  </style>
</head>

<body>
  <!-- Fixed navbar -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
          aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
          <span class="glyphicon glyphicon-cutlery" aria-hidden="true"></span>
          <span style="font-weight:bold;">{{request.session.shopinfo.name}}</span>
          <span style="font-size:14px;">（{{request.session.shopinfo.shop}}）</span>
        </a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="{% url 'web_index' %}">大堂点餐</a></li>
          <li><a href="#about">当前订单</a></li>
          <li><a href="#contact">历史订单</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="../navbar/">
              <span class="glyphicon glyphicon-user" aria-hidden="true"> {{request.session.webuser.nickname}}</a></li>
          <li><a href="{% url 'web_logout' %}">退出</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>

  <div class="container">
    <div class="col-md-4">
      <div class="panel panel-warning">
        <div class="panel-heading"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 购 物 车
        </div>
        <table class="table table-striped">
          <tr>
            <th width="30">序</th>
            <th>菜品</th>
            <th width="72">数量</th>
            <th width="45">单价</th>
            <th>删除</th>
          </tr>
          {% for product in request.session.cartlist.values %}
          <tr>
            <td>{{forloop.counter}}</td>
            <td>{{product.name}}</td>
            <td class="num"><i onclick="window.location='{% url 'web_cart_change' %}?pid={{product.id}}&num={{product.num|add:-1}}'" class="btn btn-default btn-xs"> - </i>
              <span>{{product.num}}</span>
              <i onclick="window.location='{% url 'web_cart_change' %}?pid={{product.id}}&num={{product.num|add:1}}'" class="btn btn-default btn-xs"> +</i>
            </td>
            <td class="price">{{product.price}}</td>
            <td><a href="{% url 'web_cart_del' product.id %}" class="btn btn-danger btn-xs" role="button">删除</a></td>
          </tr>
          {% endfor %}
        </table>

        <li class="list-group-item">
          <b>购买方式: &nbsp; </b>
          <input type="radio" name="ptype" checked value="1"> 堂吃 &nbsp;
          <input type="radio" name="ptype" value="2"> 打包 &nbsp;
        </li>
        <li class="list-group-item">
          <b>支付方式: &nbsp; </b>
          <input type="radio" name="bank" checked value="1"> 现金 &nbsp;
          <input type="radio" name="bank" value="2"> 支付宝 &nbsp;
          <input type="radio" name="bank" value="3"> 微信
        </li>

        <div class="panel-footer" style="height:50px">
          <div style="width:120px;float:left;margin:5px 0px;">合计：￥<span
              style="color:red;font-weight:bold;">{{request.session.total_money}}</span> 元</div>
          <button type="submit" class="btn btn-warning" style="width:130px;float:right">结 &nbsp; 算</button>
          <button type="button" onclick="window.location='{% url 'web_cart_clear' %}'" class="btn btn-danger" style="width:60px;float:right;margin-right:5px;">清 &nbsp; 空</button>
        </div>

      </div>
    </div>
    <div class="col-md-8">
      <!--标签页内容-->
      {% for key,category in categorylist %}
      <h5 style="padding-bottom:9px;border-bottom:1px solid #eee;color:#BB3D00"><span class="glyphicon glyphicon-list"
          aria-hidden="true"> {{ category.name }}：</h5>
      <div class="row shoplist">
        {% for product in category.pids %}
        <div class="col-sm-6 col-md-3">
          <div class="thumbnail">
            <img src="{% static 'uploads/product'%}/{{product.cover_pic}}" width="150" alt="...">
            <div class="caption">
              <h6>{{ product.name }}</h6>
              <div class="bn">￥<span class="price">{{ product.price }}</span>元</a>
                <a href="{% url 'web_cart_add' product.id %}" class="btn btn-warning btn-xs pull-right" role="button"><span
                    class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 购买</a></div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
      {% endfor %}

    </div>
  </div>

  <script src="{% static 'web/js/jquery.min.js'%}"></script>
  <script src="{% static 'web/js/bootstrap.min.js'%}"></script>

</body>

</html>